<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
</head>
<body>
<div id="app">
    <h1>index.html</h1>
    <input type="button" value="测试SpringMVC处理ajax" @click="testAjax">
    <input type="button" value="使用@RequestBody注解处理json格式的请求参数" @click="testRequestBody">
    <a th:href="@{/test/ResponseBody}">测试@ResponseBody注解响应浏览器数据</a>
    <input type="button" value="使用@ResponseBody注解处理json格式的数据" @click="testResponseBody">
    <a th:href="@{/test/down}">下载图片</a>
    <form th:action="@{/test/up}" method="post" enctype="multipart/form-data">
       头像： <input type="file" name="photo"><br>
        <input type="submit" value="上传">
    </form>
</div>

<script>
    /**
     * axios({
     *                     url:"",  // 请求路径
     *                     method:"",   // 请求方式
     *                     params:{},   // 以name=value&name=value的方式发送的请求参数,不管使用的请求方式是get或post，
     *                     // 请求参数都会被拼接到请求地址后
     *                     // 此种方式的请求参数可以通过request.getParameter()获取
     *                     data:{}  // 以json格式发送的请求参数
     *                     // 请求参数会被保存请求报文的请求体传输到服务器
     *                     // 读取请求体中的数据
     *                 }).then(res=>{
     *                     console.log(res.data);
     *                 });
     */
    var v = new Vue({
        el: "#app",
        methods:{
            testAjax(){
                axios.post(
                    "test/ajax?id=1001",{
                        username: "admin",
                        password: "123456"
                    }).then(res=>{
                    console.log(res.data);
                })
            },
            testRequestBody(){
                axios.post("test/RequestBody/json",{
                    username: "admin",
                    password: "123456",
                    age: 23,
                    gender: "男"
                }).then(res=>{
                    console.log(res.data);
                })
            },
            testResponseBody(){
                axios.post("test/ResponseBody/json").then(res=>{
                    console.log(res.data);
                })
            }
        }
    })
</script>
</body>
</html>